<template>
  <div class="addLeave-warp">
    <a-form ref="formRef" :model="state.form">
      <a-form-item
        label="学号"
        name="employeeCode"
        :rules="[{ required: true, message: '请输入学号' }]"
      >
        <a-input disabled v-model:value="state.form.employeeCode" />
      </a-form-item>
      <a-form-item
        label="姓名"
        name="name"
        :rules="[{ required: true, message: '请输入姓名' }]"
      >
        <a-input disabled v-model:value="state.form.name" />
      </a-form-item>

      <a-form-item
        label="请假类型"
        name="reasonType"
        :rules="[{ required: true, message: '请选择请假类型' }]"
      >
        <a-select v-model:value="state.form.reasonType">
          <a-select-option :value="1">事假</a-select-option>
          <a-select-option :value="2">病假</a-select-option>
          <a-select-option :value="3">探亲</a-select-option>
          <a-select-option :value="4">回家</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        name="time"
        label="请假时间"
        :rules="[{ required: true, message: '请选择请假时间' }]"
      >
        <a-range-picker
          v-model:value="state.form.time"
          style="width: 100%; margin-top: 4px"
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          size="large"
          :placeholder="['选择开始时间', '选择结束时间']"
          @change="onChange"
        />
      </a-form-item>
      <a-form-item
        label="情况说明"
        name="reason"
        :rules="[{ required: true, message: '请说明详细情况' }]"
      >
        <a-textarea
          v-model:value="state.form.reason"
          placeholder="请说明详细情况"
          :rows="4"
        />
      </a-form-item>
    </a-form>
    <a-button type="primary" block @click="confirm(formRef)">提交</a-button>
  </div>
</template>

<script lang="ts" setup>
import moment from "moment";
import { ref, reactive, onMounted, computed } from "vue";
import { message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { useStudentLeaveCreate } from "@/api";
const router = useRouter();
const route = useRoute();
const formRef = ref();
const useContent = () => {
  return {
    name: route.query.name,
    reasonType: "",
    reason: "",
    startTime: "",
    endTime: "",
    time: [],
    employeeCode: route.query.code,
  };
};

const state = reactive({
  form: useContent(),
  employeeName: "",
});

const onChange = (value: Moment[], dateString: string[]) => {
  state.form.startTime = dateString[0] !== "" ? dateString[0] + ":00" : "";
  state.form.endTime = dateString[1] !== "" ? dateString[1] + ":00" : "";
};

const confirm = (formRef: any) => {
  if (!formRef) return;
  formRef.validate().then(async () => {
    let res = await useStudentLeaveCreate(state.form);
    if (res.success) {
      message.success("操作成功", 2);
    } else {
      message.error("操作失败，请稍后再试！", 2);
    }
    setTimeout(() => {
      router.push({
        path: "/student/leaveRecord",
      });
      state.form = useContent();
    }, 2300);
  });
};
// const initState = () => {
//   // authRedict();
//   // useAuthParse("http://mjkq.cqzhxy.cn:18088/m/student/addLeave")
//   //   .then((res: any) => {
//   //     const { detail } = res.content;
//   //     // state.params.operatorCode = detail.code;
//   //   })
// };

onMounted(() => {
  document.title = "请假申请";
  let ainput = document.querySelectorAll(
    ".addLeave-warp .ant-picker-input input"
  );
  ainput.forEach((item: any) => {
    item.addEventListener("focus", () => {
      item.setAttribute("readonly", "false");
    });
  });
  // initState();
});
</script>
<style scoped lang="less">
.addLeave-warp {
  padding: 20px;
  :deep(.ant-form-item) {
    margin-bottom: 12px !important;
  }
}
</style>
